<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS悬浮动画</title>
  <link rel="stylesheet" type="text/css" href="./style/demo1_1.css" ></link>

</head>
<body>
  <button class="btn btn-primary btn-ghost btn-shine">
    hover me
  </button>
</body>
</html>
<script>
  window.onload = (event) => {
    console.log("test");
    document.querySelector(".btn").onmousemove = (e)=>{
      const x = e.pageX - e.target.offsetLeft;
      const y = e.pageY - e.target.offsetTop;
      e.target.style.setProperty("--x", `${x}px`);
      e.target.style.setProperty("--y", `${y}px`);
    };
  }
</script>